<template>
  <div>
    <BasicForm
      @submit="handleSubmit"
      @register="registerForm"
    />
    <!-- 进度条表格 -->
    <div>
      <!-- 第一个 -->
      <div>
        <div style="padding: 10px 10px 0; display: flex; width: 100%">
          <div
            v-for="(_, index) in 7"
            :key="index"
            :style="{ background: groundColor(index), flex: 1, padding: '5px 10px' }"
          >
            <div style="display: flex">
              <input type="checkbox" id="checkbox" />
              <div style="margin-left: 5px; color: #fff">年度 完:2 补:0 </div>
            </div>
          </div>
        </div>
        <a-collapse ghost>
          <a-collapse-panel key="1" header="【1】166-a-v2_HTFY221019.03.001_0-01A_(1件)清洗">
            <!-- <template #header>
              <span> Tab 1 </span>
            </template> -->
            <a-table :dataSource="dataSource" :columns="columns" :pagination="false" bordered>
              <template #bodyCell="{ record, index, column }">
                <template v-if="column.key === 'address'">
                  <span>{{ record.address }}</span>
                  <span
                    style="padding: 2px 5px; background: #3c8dbc; border-radius: 5px; color: #fff"
                    >{{ getDiffDay(record.address) }}</span
                  >
                </template>
              </template>
            </a-table>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <!-- 第二个 -->
      <div>
        <div style="padding: 10px 10px 0; display: flex; width: 100%">
          <div
            v-for="(_, index) in 7"
            :key="index"
            :style="{ background: groundColor(index), flex: 1, padding: '5px 10px' }"
          >
            <div style="display: flex">
              <input type="checkbox" id="checkbox" />
              <div style="margin-left: 5px; color: #fff">年度</div>
            </div>
          </div>
          <!-- <div :style="'background: #00a65a; flex: 1'">123</div>
            <div style="background: blue; flex: 1">132</div>
            <div style="background: orangered; flex: 1">132</div>
            <div style="background: blue; flex: 1">132</div>
            <div style="background: blue; flex: 1">132</div>
            <div style="background: orangered; flex: 1">132</div> -->
        </div>
        <a-collapse ghost>
          <a-collapse-panel key="2" header="【2】166-b-v2_HTFY221019.03.002_0-01B_(1件)清洗">
            <a-table :dataSource="dataSource" :columns="columns" :pagination="false" bordered>
              <template #bodyCell="{ record, index, column }">
                <template v-if="column.key === 'address'">
                  <span>{{ record.address }}</span>
                  <!-- <div>{{ new Date('2023-04-21 16:59:00').getTime() }}</div>
                    <div>{{ new Date().getTime() }}</div> -->
                  <!-- <Time :value="now" /> -->
                  <span
                    style="padding: 2px 5px; background: #3c8dbc; border-radius: 5px; color: #fff"
                    >{{ getDiffDay(record.address) }}</span
                  >
                </template>
              </template>
            </a-table>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'OrderStatus',
    // components: { ACollapse: Collapse },
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n('test.testTree');

  const schemas: FormSchema[] = [
    {
      label: t('订单号'),
      field: 'name',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
    },
    {
      label: t('设计师'),
      field: 'name1',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
    },
    {
      label: t('加工单位'),
      field: 'name2',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
    },
    {
      label: t('加工名称'),
      field: 'name3',
      component: 'Input',
      componentProps: {
        maxlength: 100,
      },
    },
    {
      label: t('图纸数量'),
      field: 'code',
      component: 'Input',
      componentProps: {
        maxlength: 64,
      },
      // rules: [
      //   { required: true },
      //   { pattern: /^[a-zA-Z0-9_]*$/, message: t('请输入字母数字下划线') },
      // ],
    },
    {
      label: t('紧急程度'),
      field: 'testRadio',
      component: 'CheckboxGroup',
      componentProps: {
        dictType: 'sys_menu_type',
      },
    },

  ];
  function handleSubmit(e) {
    console.log(e);
  }
  const [ registerForm ] = useForm({
    labelWidth: 100,
    schemas: schemas,
    showActionButtonGroup: true,
    baseColProps: { lg: 6, md: 24 },
  });
  // 计算相对时间显示
  const getDiffDay = (date: string) => {
    let totalDays, diffDate;
    let myDate_1 = Date.parse(date);
    let now = new Date().getTime();

    diffDate = myDate_1 - now;
    // 将两个日期都转换为毫秒格式，然后做差
    // diffDate = Math.abs(myDate_1 - myDate_2); // 取相差毫秒数的绝对值
    // totalDays = Math.floor(Math.abs(diffDate) / (1000 * 3600 * 24)); // 向下取整
    totalDays = Math.floor(diffDate / (1000 * 3600 * 24));
    if (totalDays > 0) {
      let day = totalDays;
      if (day > 0 && day < 7) {
        totalDays = day + '天后';
      } else if (day >= 7 && day < 30) {
        totalDays = Math.floor(day / 7) + '周后';
      } else if (day >= 30 && day < 365) {
        totalDays = Math.floor(day / 30) + '月后';
      } else {
        totalDays = Math.floor(day / 365) + '年后';
      }
    } else if (totalDays < 0) {
      let day = Math.abs(totalDays);
      if (day > 0 && day < 7) {
        totalDays = day + '天前';
      } else if (day >= 7 && day < 30) {
        totalDays = Math.floor(day / 7) + '周前';
      } else if (day >= 30 && day < 365) {
        totalDays = Math.floor(day / 30) + '月前';
      } else {
        totalDays = Math.floor(day / 365) + '年前';
      }
    } else {
      totalDays = '刚刚';
    }
    console.log(totalDays);
    return totalDays;
  };
  // 判断状态颜色
  const groundColor = (index) => {
    let color;
    if (index % 2 == 0) {
      color = '#00a65a';
    } else if (index % 3 == 0) {
      color = '#dd4b39';
    } else {
      color = '#f39c12';
    }
    return color;
  };
  const dataSource = ref([
    {
      key: '1',
      name: 'BC',
      age: 1,
      address: '2023/02/05',
    },
    {
      key: '2',
      name: 'XL',
      age: 1,
      address: '2022/05/05',
    },
    {
      key: '3',
      name: 'ML',
      age: 1,
      address: '2022/06/05',
    },
  ]);
  const columns = ref([
    {
      title: '工序',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'age',
      key: 'age',
      align: 'center',
    },
    {
      title: '序号',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
    {
      title: '责任人',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
    {
      title: '时间',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },
  ]);
</script>
<style></style>
